<route lang="json5">
{
  style: {
    navigationStyle: 'default',
    navigationBarTitleText: '农商管理',
  },
}
</route>
<template>
  <div>
    <!--    <AdHeader :get-success="success" @success="onSuccess" />-->
    <div class="as-header flex justify-between items-center px-4 text-[14px] text-[#fff] bg-[#000]">
      <div class="left" @click="switchVoice(!open)">
        <image v-if="open" src="@/static/images/voice.png" mode="widthFix" class="w-[20px]"></image>
        <image v-else src="@/static/images/silence.png" mode="widthFix" class="w-[20px]"></image>
      </div>
      <div v-if="isOver" class="right" @click="handleSuccess">
        领取成功
        <image class="close w-[10px]" src="@/static/images/close.png" mode="widthFix"></image>
      </div>
      <div v-else class="right">
        <span>{{ count }}</span>
        S后领取奖励
      </div>
    </div>
    <!-- 视频区域 -->
    <div class="video-area">
      <video
        id="video"
        :src="advInfo.filepath"
        autoplay
        object-fit="cover"
        :controls="false"
      ></video>
    </div>
    <!-- 提醒继续观看 -->
    <NsOverlay
      v-model:visible="visible"
      v-if="visible"
      height="618rpx"
      footerTop="70rpx"
      okText="确定"
      cancelText="放弃奖励"
      @ok="onOk"
      @cancel="onCancel"
    >
      <div class="text-center tip-text" style="padding-top: 156rpx; line-height: 48rpx">
        <div class="mt-5 text-[#666]">
          暂未获得奖励
          <br />
          是否继续观看视频
        </div>
      </div>
    </NsOverlay>
  </div>
  <page-container
    :show="isShow"
    :duration="false"
    :overlay="false"
    @beforeleave="beforeleave"
  ></page-container>
  <!-- 确认成功 -->
  <NsOverlay
    v-model:visible="successVisible"
    v-if="successVisible"
    height="618rpx"
    footerTop="70rpx"
    okText="确定"
    :showCancel="false"
    @ok="onSuccess"
  >
    <div class="text-center tip-text" style="padding-top: 68rpx; line-height: 48rpx">
      <image src="@/static/images/check-success.png" mode="widthFix" class="w-[50px]"></image>
      <div class="mt-5 text-[#666]">
        恭喜您 成功获得
        <br />
        <span class="text-[#56B756]">￥{{ amount }}</span>
        优惠券
      </div>
    </div>
  </NsOverlay>
</template>

<script setup lang="ts">
import { onShow, onUnload } from '@dcloudio/uni-app'
import AdHeader from '@/components/ad-header.vue'
import NsOverlay from '@/components/ns-overlay.vue'

import { useStorage } from '@/utils/storage'
import { getAdCoupon } from '@/service/advertise'
import { useToast } from 'wot-design-uni'
const { get } = useStorage()
const advInfo = ref<IAdvData>({})
onLoad(() => {
  advInfo.value = get('advInfo')
})
const toast = useToast()
const successVisible = ref(false)
// 达到获得奖励的条件
const success = ref(false)
const onSuccess = async () => {
  isShow.value = false
  successVisible.value = false
  setTimeout(() => {
    uni.navigateBack({
      delta: 2,
    })
  }, 1000)
}

const visible = ref(false)

onShow(() => {})

// 监听页面退出
onUnload(() => {
  // if (!success.value) {
  //   visible.value = true
  //   // uni.setStorageSync('isContinue', 'true')
  //   // uni.navigateBack()
  // }
})
const onCancel = () => {
  uni.navigateBack({
    delta: 2,
  })
}
const onOk = () => {
  isShow.value = true
  visible.value = false
  videoContext.value.play()
  timer.value = setInterval(() => {
    count.value -= 1
    if (count.value === 1) {
      timer.value && clearInterval(timer.value)
      timerBack.value = setTimeout(async () => {
        // successVisible.value = props.getSuccess
        await handleSuccess()
        isOver.value = true
      }, 1000)
    }
  }, 1000)
}
const isShow = ref(true)
const beforeleave = (e) => {
  console.log(e, 'beforeleave')
  isShow.value = false
  if (count.value > 1) {
    visible.value = true
    videoContext.value.pause()
    clearInterval(timer.value)
    timer.value = null
  }
  e.preventDefault()
}
const open = ref(true)
// 打开/关闭声音
function switchVoice(isVoice: boolean) {
  open.value = isVoice
}

// 倒计时结束
const isOver = ref(false)
const amount = ref(0)
async function handleSuccess() {
  const res: IResData<any> = await getAdCoupon(advInfo.value.adv_id)
  console.log(res, '广告奖励')
  if (res.code === 1) {
    // visible.value = false
    amount.value = res.data
    successVisible.value = true
  } else {
    toast.show(res.msg)
    successVisible.value = false
    setTimeout(() => {
      uni.navigateBack({
        delta: 2,
      })
    }, 1000)
  }
}
const timer = ref()
const timerBack = ref()
const count = ref(30)

// const onOk = () => {
//   uni.navigateBack({
//     delta: 2,
//   })
// }
const videoContext = ref()
onReady(() => {
  videoContext.value = uni.createVideoContext('video')
})
onMounted(() => {
  // 开始倒计时
  timer.value = setInterval(() => {
    count.value -= 1
    if (count.value === 1) {
      timer.value && clearInterval(timer.value)
      timerBack.value = setTimeout(async () => {
        // successVisible.value = props.getSuccess
        await handleSuccess()
        isOver.value = true
      }, 1000)
    }
  }, 1000)
})
</script>
<style scoped>
.video-area {
  padding-top: 96rpx;
  width: 750rpx;
  height: calc(100vh - 96rpx);
  box-sizing: border-box;
}

#video {
  width: 100%;
  height: 100%;
}
.as-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 750rpx;
  height: 96rpx;
  box-sizing: border-box;
}

.as-header .right {
  padding: 8rpx 20rpx;
  border-radius: 122px;
  box-sizing: border-box;
  border: 1px solid #ffffff;
}

.close {
  vertical-align: initial;
}
</style>
